<template>
  <div
    class="c-bg-sgray theme-market"
  >
    <template v-for="(item, index) in bargainList">
      <div class="c-bg-white" :key="index" v-if="item.otherStatus != 1">
        <div
          class="c-pv24 c-mh24 c-flex-row c-bd-b1"
          @click="clickGoBarginDetail(index)"
        >
          <div class="c-ww210 c-hh140 c-text-hidden c-flex-row c-flex-center c-flex-shrink0 c-p c-br16">
            <vip-custom-img
              :cover="item.cover"
              :imgClass="'imgCloseBig'"
              :fontClass="{
                boxStyle: 'c-pt40 c-pb48 c-pl12',
                name: 'c-fs32 c-text-ellipsis1 c-fw-b',
                duration: 'c-fs26'}"
              :content="{name: item.vipInfo.name, duration: item.vipInfo.duration, durationType: item.vipInfo.durationType}"
              v-if="item.cover && (item.cover.coverType ==1 || item.cover.coverType ==2)"
            />
            <CoverImg v-else coverSizeClass="c-w100 c-h c-text-hidden c-br16" imgClass="c-br16" :coverUrl="$addXossFilter(item.cover ? item.cover : (item.prodType == cfrom.vip ? require('@/assets/i/wap/course/vip.png') : (item.prodType == cfrom.svip ? require('@/assets/i/wap/course/svip.png') : require('@/assets/defult270.png'))))" />
            <div
              v-if="item.status==1 || item.status==2"
              :class="(themeName == 'mb3' || themeName == 'mb4') ? 'mb3-timeShow' : 'timeShow'"
            >距{{item.status==1 ? '开始' : '结束'}}：
              <cj-clocker
                :time="timeFn(index)"
                format="%D 天 %H : %M : %S"
                @on-finish="finishFn(index)"
              >
              </cj-clocker>
            </div>
          </div>
          <div class="c-flex-column c-ml20 c-w100 c-justify-sb">
            <div class="c-fs24 c-fc-xblack c-text-ellipsis2">{{item.prodType == 7 ?(item.prodName + `(${item.ticketName})`):item.prodName}}</div>
            <div>
              <div class="c-fs18 c-fc-gray c-text-decoration-through c-pt16" v-if="!$isWxAppIos()">原价{{'￥' | iosPriceFilter}}{{item.prodPrice}}</div>
              <div class="c-flex-row c-aligni-center">
                <div class="c-fs20 c-fc-xmlred c-w0 c-flex-grow1" v-if="!$isWxAppIos()">
                  <span>砍价</span>
                  <span class="c-fw600">{{'￥' | iosPriceFilter}}</span>
                  <span class="c-fs26 c-fw600">{{item.reservePrice}}</span>
                </div>
                <div
                  class="c-fc-white c-fs22 c-flex-row c-flex-center c-ww116 c-hh48 c-br25"
                  :class="item.status == 1 ? 'c-bg-dd' : (item.status == 2 && item.userType == -1) ? 'theme-bg-gradient' : (item.status == 2 && item.userType == 1) ? 'c-bg-vgreen':''"
                >{{item.status == 1 ? '发起砍价' : (item.status == 2 && item.userType == 1) ? '正在砍价' : (item.status == 2 && item.userType == -1) ? '发起砍价' : ''}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
    <loading-status-tem
      :noDataText="'暂无结果'"
      :noData="bargainList.length == 0"
      :noMoreData="bargainList.length > 0 && is_page == false"
      :showLoading="isLoading"
    ></loading-status-tem>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js";
import VipCustomImg from "@/components/templates/common/VipCustomImg.vue";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import CoverImg from '@/components/templates/common/coverImg.vue';
import { goDetails } from "@/utils/goDetails.js";
export default {
  name: "BargainList",
  components: {
    loadingStatusTem,
    VipCustomImg,
    CoverImg
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      themeName: localStorage.getItem('themeName') ? localStorage.getItem('themeName') : 'mb5',
      is_page: false,
      page: 1,
      limit: 10,
      bargainList: [],
      isLoading: false,
      cfrom: global.ckFrom,
      searchName: '',
      prodType: ''
    }
  },
  created() {
    utilJs.appShare(this);
  },
  activated() {
    setDocumentTitle('砍价购');
    this.prodType = this.$route.query.prodType || '';
    this.initData();
    this.wechatShare();
    window.addEventListener('scroll', this.windowScrollFunction);
  },
  deactivated() {
    window.removeEventListener('scroll', this.windowScrollFunction);
  },
  methods: {
    initData() {
      this.page = 1;
      this.is_page = false;
      this.bargainList = [];
      this.getMore();
    },
    clickGoBarginDetail(index) {
      let query = {}
      let prodId = this.bargainList[index].prodType == this.cfrom.activity ? this.bargainList[index].extraId : this.bargainList[index].prodId
      if ((this.bargainList[index].prodType == this.cfrom.vip || this.bargainList[index].prodType == this.cfrom.svip) && this.bargainList[index].status < 3) {
        query.isBargain = true;
      }
      goDetails(this, this.bargainList[index].prodType, prodId, query, (this.bargainList[index].courseType || 0), 1);
    },
    // startSearch(e) {
    //   this.searchName = e.searchValue;
    //   this.page = 1;
    //   this.bargainList = [];
    //   utilJs.toPageScrollTop();
    //   this.getMore();
    // },
    getMore() {
      let $this = this;
      if (!this.isLoading) {
        this.isLoading = true;
        let prodType = this.prodType == 12 ? '&prodType=12' : '';
        utilJs.getMethod(global.apiurl + 'bargains/getBargainList?name=' + this.searchName + '&page=' + this.page + '&limit=' + this.limit + prodType, function (res) {
          if ($this.page == 1) {
            $this.bargainList = res.data;
          } else {
            let list = res.data;
            $this.bargainList = $this.bargainList.concat(list);
          }
          $this.page = res.data && (res.data.length >= $this.limit) ? ($this.page + 1) : $this.page;
          $this.is_page = res.data && (res.data.length >= $this.limit) ? true : false;

          $this.isLoading = false;
        });
      }
    },
    //下滑加载更多
    windowScrollFunction: function () {
      let that = this;
      utilJs.handleLoading(function () {
        if (that.is_page == true) {
          that.getMore();
        }
      });
    },
    wechatShare: function () {
      let title = "砍价购";
      let shareUrl =
        `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}&prodType=${this.prodType}`;
      utilJs.wechatConfig(shareUrl, title, "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      let title = "砍价购";
      let shareUrl =
        `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}&prodType=${this.prodType}`;
      utilJs.appShareTrue(title, "", shareUrl, "");
    },
    iosAppRouteChange(toPath) {
      if (utilJs.isIOSApp()) {
        window.webkit.messageHandlers.iosWechatRoute.postMessage(toPath);
      } else if (utilJs.isAndoridNewApp()) {
        let data = {
          path: toPath
        }
        window.androidWechatRoute.doAction(JSON.stringify(data))
      } else {
        this.$routerGo(this, "push", { path: toPath });
      }
    },
    timeFn(index) {
      let stime = this.bargainList ? utilJs.getTimeByDate(this.bargainList[index].startTime) : 0;
      let etime = this.bargainList ? utilJs.getTimeByDate(this.bargainList[index].endTime) : 0;
      let nowTime = (new Date()).getTime();
      //status 1未开始,2进行中,3已结束,4已停止
      let time = '';
      if (stime > nowTime) {
        this.bargainList[index].status = 1;
        time = stime;
      } else if (etime > nowTime) {
        this.bargainList[index].status = 2;
        time = etime;
      } else {
        this.bargainList[index].status = 3;
      }
      return time;
    },
    finishFn(index) {
      if (this.bargainList[index].status == 1) {
        this.bargainList[index].status = 2;
      } else {
        this.bargainList[index].status = 3;
      }
    }
  }
}
</script>

<style lang="less" scoped>
.timeShow {
  font-size: 0.45rem;
  color: #fff;
  line-height: .7rem;
  width: 100%;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  bottom: 0;
  left: 0;
  padding: .15rem 0;
}
.mb3-timeShow {
  font-size: 0.45rem;
  color: #fff;
  line-height: 0.9rem;
  width: 100%;
  text-align: center;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
  position: absolute;
  bottom: 0;
  left: 0;
}
</style>